<template>
  <div class="publicJobIndex">
    <div id="container" style="display:flex;">
      <div class="sidebar">
        <div class="subscribe_side mt20">
          <img
            width="242"
            height="242"
            v-if="platform == 'weapp'"
            :src="locationHref + '/saas/get-mp-qr'"
          />
          <img
            width="242"
            height="242"
            v-else
            :src="'https://api.qrserver.com/v1/create-qr-code/?data=http://'+locationHref+'/pc&amp;size=100x100'"
          />
          <br />
          <span class="c7">
            扫描{{name}}二维码
            <br />微信轻松搜工作
          </span>
        </div>
      </div>
      <!-- end .sidebar -->
      <div class="content">
        <div>
          <el-form ref="form" :model="formItem" label-width="80px">
            <div>
              <p class="topic-title">职位信息</p>
              <el-form-item
                label="职位类别"
                style="margin-left:30px;margin-right:170px;margin-top:15px;"
              >
                <!-- 职位行业 -->
                <el-select
                  v-model="formItem.industry_id"
                  placeholder="请选择职位类别"
                  style="width:200px;margin-left: 30px; margin-right:10px;"
                  @change="getTwoMenu"
                >
                  <el-option
                    v-for="(item,index) in oneMenu"
                    :key="item.industry_id"
                    :label="item.industry_title"
                    :value="item.industry_id"
                  ></el-option>
                </el-select>

                <el-select v-model="formItem.position_id" style="width:200px" @change="getPosition">
                  <el-option
                    v-for="(item,index) in twoMenu"
                    :key="item.position_id"
                    :label="item.position_title"
                    :value="item.position_id"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="职位名称" class="form-item">
                <el-input
                  style="margin-left: 38px;"
                  v-model="formItem.job_title"
                  placeholder="自定义职位名称"
                ></el-input>
              </el-form-item>

              <el-form-item label="职位性质" class="form-item">
                <el-radio-group v-model="formItem.job_type" style="margin-left: 38px;">
                  <el-radio :label="1">全职</el-radio>
                  <el-radio :label="2">兼职</el-radio>
                  <el-radio :label="3">实习</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="招聘人数" class="form-item">
                <div style="display:flex">
                  <el-input
                    style="margin-left: 38px;"
                    v-model="formItem.recruits_number"
                    placeholder="请输入正整数"
                  ></el-input>
                  <span>&nbsp;&nbsp;人</span>
                </div>
              </el-form-item>

              <el-form-item label="薪资范围" class="form-item" style="width:500px">
                <div style="display:flex;">
                  <el-select
                    v-model="formItem.salary_unit"
                    style="width:100px;margin-left:37px;margin-right:10px;"
                  >
                    <el-option
                      v-for="(item,index) in salaryType"
                      :key="index"
                      :label="item"
                      :value="index+1"
                    ></el-option>
                  </el-select>

                  <el-input style="margin-left: 18px;width:100px" v-model="formItem.salary_min"></el-input>
                  <span>&nbsp;&nbsp;~&nbsp;&nbsp;</span>
                  <el-input style="margin-left: 18px;width:100px" v-model="formItem.salary_max"></el-input>
                  <span>&nbsp;&nbsp;元</span>
                </div>
              </el-form-item>

              <el-form-item label="福利待遇" class="form-item" style="width:600px">
                <el-checkbox-group v-model="jobTags">
                  <el-checkbox
                    v-for="(item,index) in tagList"
                    :key="index"
                    :label="index"
                    style="margin-left:10px"
                  >{{item}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>

              <el-form-item label="职位描述" class="form-item">
                <el-input
                  style="margin-left: 38px;width:500px"
                  type="textarea"
                  :autosize="{ minRows: 5, maxRows: 10}"
                  v-model="formItem.job_description"
                  placeholder="请输入职位描述"
                ></el-input>
              </el-form-item>
            </div>

            <div>
              <p class="topic-title">其他信息</p>
              <el-form-item
                label="职位要求"
                style="margin-left:30px;margin-right:170px;margin-top:15px;"
              >
                <!-- 职位行业 -->
                <el-select
                  v-model="formItem.job_education"
                  placeholder="请选择职位类别"
                  style="width:200px;margin-left: 30px; margin-right:10px;"
                >
                  <el-option
                    v-for="(item,index) in educationArr"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>

                <el-select v-model="formItem.gender" style="width:200px">
                  <el-option
                    v-for="(item,index) in gender"
                    :key="index"
                    :label="item"
                    :value="index"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="工作经验" class="form-item" style="width:500px">
                <div style="display:flex;">
                  <el-input
                    style="margin-left: 38px;width:100px"
                    v-model="formItem.job_experience_min"
                  ></el-input>
                  <span>&nbsp;&nbsp;~&nbsp;&nbsp;</span>
                  <el-input
                    style="margin-left: 10px;width:100px"
                    v-model="formItem.job_experience_max"
                  ></el-input>
                  <span>&nbsp;&nbsp;年</span>
                </div>
              </el-form-item>

              <el-form-item label="年龄选择" class="form-item" style="width:500px">
                <div style="display:flex;">
                  <el-input style="margin-left: 38px;width:100px" v-model="formItem.age_min"></el-input>
                  <span>&nbsp;&nbsp;~&nbsp;&nbsp;</span>
                  <el-input style="margin-left: 10px;width:100px" v-model="formItem.age_max"></el-input>
                  <span>&nbsp;&nbsp;岁</span>
                </div>
              </el-form-item>

              <el-form-item label="悬赏金额" class="form-item">
                <el-input style="margin-left: 38px;" v-model="formItem.resume_price"></el-input>
              </el-form-item>

              <el-form-item label="联系电话" class="form-item">
                <el-input style="margin-left: 38px;" v-model="formItem.phone"></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div>
          <el-button style="margin-bottom:10px" type="primary" @click="updateJob">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { jobDescribe, jobShow } from "~/api/worker/company.js";
import { Tag, Industry } from "~/api/constant/common.js";
import { Message } from "element-ui";

export default {
  name: "publicJobIndex",
  data() {
    return {
      formItem: {
        age_max: "",
        age_min: "",
        company_id: "",
        gender: 0,
        industry_id: "",
        industry_title: "",
        tag: [],
        job_description: "",
        job_education: 0,
        job_experience_max: "",
        job_experience_min: "",
        job_type: 1,
        phone: "",
        position: { position_id: "", position_title: "" },
        position_id: "",
        position_title: "",
        position_id: "",
        recruits_number: "",
        resume_price: "",
        review_status: "1",
        salary_max: "",
        salary_min: "",
        salary_unit: "",
        title: "",
        avatar_pv: "",
        reply_id: ""
      },
      gender: ["性别不限", "男", "女"],
      salaryType: ["月薪", "日薪", "时薪"],
      oneMenu: [], //行业一级菜单
      twoMenu: [], //行业二级菜单
      educationArr: [
        "学历不限",
        "小学",
        "初中",
        "中专",
        "高中",
        "大学专科",
        "大学本科",
        "硕士",
        "博士",
        "博士后",
        "其它"
      ],
      experienceArr: [
        "经验不限",
        "无经验",
        "1年",
        "2年",
        "3年",
        "4年",
        "5年",
        "6年",
        "7年",
        "8年",
        "9年",
        "10年"
      ],
      tagList: [], //所有标签福利
      jobTags: [], //当前职位标签福利
      // job_id: 0,
      jobId: "",
      jobInfo: {},
      // companyKeyword: "",
      // companyList: [],
      replyList: [],
      positionCount: 0,
      name: localStorage.getItem("name"),
      member_right: {}
    };
  },
  components: {},
  created() {
    this.$store.dispatch("changeTabName", "publicJob");
  },
  mounted() {
    if (this.$route.query.jobId) {
      this.jobId = this.$route.query.jobId;
      this.jobItem();
    } else {
      this.initJobTab();
    }
  },
  methods: {
    async initJobTab() {
      //获取福利标签
      this.tagList = await Tag().catch(err => {
        Message.error("系统错误，请联系技术人员。Tag：" + err);
      });

      //获取一级行业信息
      let industyList = await Industry().catch(err => {
        Message.error("系统错误，请联系技术人员。Industry：" + err);
      });

      for (let i = 0; i < industyList.length; i++) {
        this.oneMenu.push(industyList[i]);
      }
    },
    //职位详情
    async jobItem() {
      //获取职位列表
      let result = await jobShow({ job_id: this.jobId }).catch(err => {
        Message.error("系统错误，请联系技术人员。" + err);
      });
      result.industry_id = result.industry_id == 0 ? "" : result.industry_id;
      result.position_id = "";
      this.formItem = result; //初始化表单

      //拿取权益
      this.member_right = result.member_right;

      //福利标签列表
      let tagTypeStr = [];
      for (let i = 0; i < result.tag.length; i++) {
        tagTypeStr.push(result.tag[i].tag_type.toString(10));
      }
      // console.log(tagTypeStr, 787878787)
      this.jobTags = tagTypeStr;
      // this.formItem.job_type = this.formItem.job_type.toString(10);
      // console.log(this.formItem)

      //获取福利标签
      this.tagList = await Tag().catch(err => {
        Message.error("系统错误，请联系技术人员。Tag：" + err);
      });

      //获取一级行业信息
      let industyList = await Industry().catch(err => {
        Message.error("系统错误，请联系技术人员。Industry：" + err);
      });

      for (let i = 0; i < industyList.length; i++) {
        this.oneMenu.push(industyList[i]);
      }

      this.getTwoMenu(result.industry_id); //初始化行业二级栏目
    },
    //点击实现行业二级菜单
    getTwoMenu(industry_id) {
      let oneMenu = this.oneMenu;
      for (let i = 0; i < oneMenu.length; i++) {
        if (industry_id == oneMenu[i].industry_id) {
          this.twoMenu = oneMenu[i].position;
        }
      }
      if (this.positionCount >= 1) {
        this.formItem.position_id = "";
      }

      this.positionCount++;
      this.formItem.industry_id = industry_id;
    },
    getPosition(position_id) {
      this.formItem.position_id = position_id;
    },
    updateJob() {
      let dataList = JSON.parse(JSON.stringify(this.formItem));

      let tagStr = "";
      for (let i = 0; i < this.jobTags.length; i++) {
        tagStr = tagStr + "," + this.jobTags[i];
      }

      dataList.tag = tagStr.substr(1);

      let { refresh_job_times, publish_job_times } = this.member_right;
      let one = "";
      let two = ""
      if (this.jobId) {
        one = `是否扣除1次刷新职位权益,当前可免费刷新${refresh_job_times}次，刷新成功后即会扣除`;
        two = `当前可刷新职位0次,是否前往我的权益购买`
      } else {
        one = `是否扣除1次发布职位权益,当前可免费发布${publish_job_times}次，发布成功后即会扣除`;
        two = `当前可发布职位0次,是否前往我的权益购买`
      }
      if (refresh_job_times > 0) {
        this.$confirm(one)
          .then(data => {
            jobDescribe(dataList)
              .then(result => {
                // console.log(result, 99999999)
                Message.success("保存成功");

                this.$router.push({
                  name: "positionMain"
                });
              })
              .catch(err => {
                Message.error("系统错误，请联系技术人员。" + err);
              });
          })
          .catch(err => {
            console.log(err);
          });
      } else {
        this.$confirm(two)
          .then(data => {
            this.$router.push({ name: "equityMain" });
          })
          .catch(err => {
            console.log(err);
          });
      }
    }
  }
};
</script>

<style scoped lang="less">
@import "./../../../public/less/create_job.less";
.main-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.content {
  margin-left: 28px;
  background-color: #ffffff;
  .form-item {
    // margin-top: 15px;
    width: 340px;
    // margin-top: 15px;
    margin-left: 32px;
  }
  .recruits_number {
    &:after {
      content: "人";
      clear: both;
      display: block;
      overflow: hidden;
      // font-size: 0;
      height: 0;
    }
  }
  .topic-title {
    text-align: left;
    margin-left: 38px;
    margin-top: 10px;
    font-weight: 900;
    font-size: 23px;
  }
}
.subscribe_side {
  img {
    width: 200px;
    height: 200px;
  }
}
</style>
